<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">/*
 * Copyright (c) 2016 JUI All rights reserved.
 */

;(function () {
	
	var currentZindex = JUIConfig.Win.zIndex;
	
	var getZIndex = function() {
		return ++currentZindex;
	}
	
	var SIZE_ENUM = {
		normal:0
		,max:1
		,min:2
	}
<span id=''>    /**
</span>     * @ignore
     * @class
     */
    JUI.Class('WinView', {
        init: function (cmp) {
            this.winContId = 'winId_' + cmp.id;
            this._super(cmp);

            this.hide();
            this.sizeState = SIZE_ENUM.normal;// 0正常,1最大化,2最小化
        }
        // @override
        , afterRender: function () {
            this.initPanel();
        }
        , initPanel: function () {
            this.setSize(this.opt('width'), this.opt('height'));

            this.initPanelEvent();

            this.initHeader();
            this.initBodyContent();
            this.initButtons();

            this.initDragable();
        }
        , initPanelEvent: function () {
            var that = this;
            this.getWin().click(function (e) {
                that.panelClick(e);
            });
        }
        , initBodyContent: function () {
            if (this.opt('remote')) {
                this.initRemoteContent();
            } else {
                this.initContent();
            }
        }
        , initHeader: function () {
            var that = this;
            this.getWin().find('.modal-header').find('button').click(function () {
                that.cmp.hide();
            });
        }
        , initRemoteContent: function () {
            var url = this.opt('url');
            this.frameId = 'winFrameId' + this.cmp.id;
            this.$frame = $('&lt;iframe id=&quot;' + this.frameId + '&quot; width=&quot;100%&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;');
            if (!this.opt('lazyLoad')) {
                this.setUrl(url);
            }

            $('#' + this.winContId).append(this.$frame);
        }
        , setUrl: function (url) {
            this.$frame.attr('src', url);
            this.resizeFrame();
        }
        , resizeFrame: function () {
            var size = this.getSize();
            if (this.$frame) {
                this.$frame.width(size.width - 20).height(size.height - 10);
            }
        }
        , initContent: function () {
            this.$targetWin = $('#' + this.opt('contentId'));
            $('#' + this.winContId).append(this.$targetWin);
            this.$targetWin.removeClass('hide').show();
        }
        , initButtons: function () {
            var that = this;
            var $btnPanel = this.getBtnPanel();

            var btns = this.cmp.opts.buttons;
            for (var i = 0, ilen = btns.length; i &lt; ilen; i++) {
                var btn = btns[i];

                (function (btn) {
                    var cls = btn.cls || 'btn btn-default';
                    var $btn = $('&lt;button type=&quot;button&quot; class=&quot;' + cls + '&quot;&gt;' + btn.text + '&lt;/button&gt;');
                    $btn.click(function (e) {
                        that.vBtnClick(btn, e);
                    });

                    $btnPanel.append($btn);
                })(btn);

            }

        }
        // 设置拖拽
        , initDragable: function () {
            var $win = this.getWraper();
            var $header = this.getHeader();

            if (this.opt('draggable')) {
                Drag.regist($win, $header);
            }
        }
        , move: function (left, top) {
            this.getWraper().css({left: left + 'px', top: top + 'px'});
        }
        // @override
        , show: function () {
            this.showModal();

            this.addWinZindex();

            this._super();
            
            this.normal();
    		
            this.center();

            if (this.opt('remote') &amp;&amp; this.opt('lazyLoad')) {
                this.setUrl(this.opt('url'));
            }
        }
        , setTitle: function (title) {
            this.getTitle().html(title);
        }
        , setSize: function (width, height) {
            var $win = this.getVisiable();
            if (width) {
                $win.width(width);
            }
            if (height) {
                $win.height(height);
            }
        }
        , getSize: function () {
            var $win = this.getVisiable();
            return {width: $win.width(), height: $win.height()};
        }
        , hide: function () {
            this._super();
            this.hideModal();
        }
        // 回复正常
        ,normal:function() {
    		this.sizeState = SIZE_ENUM.normal;
    		var $win = this.getWraper();
    		var size = this.normalSize;
    		$win.offset(this.normalOffset);
    		
    		if(size) {
    			this.setSize(size.width,size.height);
    		}
    		
    		this.resizeFrame();
    	}
        // 最大化
    	,max:function() {
    		if(!this.canMaxToggle()) {
    			return;
    		}
    		
    		if(this.sizeState == SIZE_ENUM.normal) {
    			this.saveNormalState();
    			
    			var $window = $(window);
    					
    			var windowWidth = $window.width();
    			var windowHeight = $window.height();
    			
    			this.move(0,0);
    			
    			this.setSize(windowWidth-32,windowHeight-153);
    			
    			this.sizeState = SIZE_ENUM.max;
    			
    			this.resizeFrame();
    		}
    	}
    	,canMaxToggle:function() {
    		return this.opt('maximizable') &amp;&amp; this.sizeState != SIZE_ENUM.min;
    	}
    	// 保存原始状态
    	,saveNormalState:function() {
    		var $win = this.getWin();
    		this.normalSize = this.getSize();
    		this.normalOffset = $win.offset();
    	}
    	,saveBeforeSize:function() {
    		this.beforeSize = this.getSize();
    	}
    	,saveBeforePos:function() {
    		var $win = this.getWin();
    		
    		this.beforeOffset = $win.offset();
    	}
    	,saveState:function() {
    		this.beforeState = this.sizeState;
    	}
    	,isMaxState:function() {
    		return this.sizeState == SIZE_ENUM.max;
    	}
    	,isMinState:function() {
    		return this.sizeState == SIZE_ENUM.min;
    	}
    	,setSize:function(width,height) {
    		var $win = this.getVisiable();
    		if(width) {
    			$win.width(width);
    		}
    		if(height) {
    			$win.height(height);
    		}
    	}
        , showModal: function () {
            var $modal = this.getModal();

            if ($modal) {
                var $doc = $(document);
                var $body = $('body');

                var clientHeight = $doc.height();
                var scrollHeight = $doc.scrollTop() || $body.scrollTop();

                var height = Math.max(clientHeight, scrollHeight);
                var zIndex = getZIndex();

                $modal.height(height).css('z-index', zIndex).show();
            }
        }
        , hideModal: function () {
            var $modal = this.getModal();

            if ($modal) {
                $modal.hide();
            }
        }
        , getModal: function () {
            if (this.opt('modal')) {
                if (!this.$modal) {
                    this.$modal = this.createModal();
                    $('body').append(this.$modal);
                }
                return this.$modal;
            }
        }
        , panelClick: function (e) {
            var $target = $(e.target);
            var isClickSelf =
                $target.parent('.modal-content')
                || $target.attr('id') == this.opt('contentId');

            if (isClickSelf) {
                this.addWinZindex();
            }
        }
        , addWinZindex: function () {
            var zIndex = getZIndex();
            this.setZIndex(zIndex);
        }
        , createModal: function () {
            return $('&lt;div class=&quot;modal-backdrop fade in&quot;&gt;&lt;/div&gt;').hide();
        }
        // 居中
        , center: function () {
            var $window = $(window);
            var $doc = $(document);
            var $body = $(document.body);

            var clientHeight = $window.height()
                , clientWidth = $window.width()
                , scrollLeft = $doc.scrollLeft() || $body.scrollLeft()
                , left = clientWidth * 0.35 + scrollLeft
                , top = clientHeight * 0.25;

            var $win = this.getWin();

            var winWidth = $win.width() || 200;
            var winHeight = $win.height() || 30;

            if (winWidth) {
                left = (clientWidth * 0.5 - (parseInt(winWidth)) * 0.5) - 10;
            }

            if (winHeight) {
                top = (clientHeight * 0.5 - (parseInt(winHeight)) * 0.5) - 50;
            }

            this.move(left, top);
        }
        , hideBtn: function (index) {
            this.getBtnPanel().find('button').eq(index).hide();
        }
        , showBtn: function (index) {
            this.getBtnPanel().find('button').eq(index).show();
        }
        , getWin: function () {
            return this.$win;
        }
        , getVisiable: function () {
            if (!this._$visi) {
                this._$visi = this.getWin().find('.modal-body').eq(0);
            }
            return this._$visi;
        }
        , getBtnPanel: function () {
            if (!this._$btnPanel) {
                this._$btnPanel = this.getWin().find('.modal-footer').eq(0);
            }
            return this._$btnPanel;
        }
        , getTitle: function () {
            if (!this._$title) {
                this._$title = this.getWin().find('.modal-title').eq(0);
            }
            return this._$title;
        }
        , getHeader: function () {
            if (!this._$had) {
                this._$had = this.getWin().find('.modal-header').eq(0);
            }
            return this._$had;
        }
        , vBtnClick: function (btn, e) {
            btn.handler.call(this.cmp, {target: e.target});
        }
        , getTemplate: function () {
            var winTpl = [
                '&lt;div class=&quot;modal-win&quot;&gt;'
                , '&lt;div class=&quot;modal-content&quot;&gt;'
                , '&lt;div class=&quot;modal-header&quot;&gt;'
                , this.cmp.opt('closable')
                    ? '&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;&lt;span class=&quot;sr-only&quot;&gt;关闭&lt;/span&gt;&lt;/button&gt;'
                    : ''
                , '&lt;h4 class=&quot;modal-title&quot;&gt;' + this.opt('title') + '&lt;/h4&gt;'
                , '&lt;/div&gt;'
                , '&lt;div class=&quot;modal-body&quot;&gt;'
                , '&lt;div id=&quot;' + this.winContId + '&quot;&gt;&lt;/div&gt;'
                , '&lt;/div&gt;'
                , '&lt;div class=&quot;modal-footer&quot;&gt;'

                , '&lt;/div&gt;'
                , '&lt;/div&gt;&lt;!-- /.modal-content --&gt;'
                , '&lt;/div&gt;&lt;!-- /.modal-win --&gt;'
            ];

            this.$win = $(winTpl.join(''));

            return this.$win;
        }
    }, JUI.View);

<span id='Drag'>    /**
</span>     * 窗体拖拽工具类
     * @example 示例:
     * // 注册
     * Drag.regist($winDiv,$titleDiv);
     * @class
     */
    var Drag = (function () {

        var clickedClientX = 0;
        var clickedClientY = 0;
        var oldTop = 0;
        var oldLeft = 0;
        var winHeight = 0;

        var $window = $(window);
        var $document = $(document);

        return {
<span id='Drag-method-regist'>            /**
</span>             * 注册拖拽
             * 需要传入整个窗体dom和标题部分的dom
             */
            regist: function ($win, $title) {
                $title.css({cursor: 'move'});

                $title.on('mousedown', function (evt) {
                    evt.preventDefault();
                    // 窗口尺寸
                    clientHeight = $window.height();
                    clientWidth = $window.width();

                    // 鼠标点击title时的位置
                    clickedClientX = evt.clientX;
                    clickedClientY = evt.clientY;

                    var winOffset = $win.offset();

                    // 窗体原始坐标,相对于窗体左上角
                    oldTop = parseInt(winOffset.top);
                    oldLeft = parseInt(winOffset.left);

                    $document.on('mousemove', mousemove);
                    $document.on('mouseup', mouseup);
                });

                function mousemove(e) {
                    // 水平拖行距离 = 鼠标滑动时的位置 - 鼠标点击title时的位置
                    var dragSizeWidth = e.clientX - clickedClientX; // 水平拖动距离
                    var dragSizeHeight = e.clientY - clickedClientY; // 垂直拖动距离
                    // 窗体新的坐标 = 鼠标拖动距离 + 窗体老的坐标距离
                    var newLeft = dragSizeWidth + oldLeft;
                    var newTop = dragSizeHeight + oldTop;

                    if (newLeft &lt; clientWidth) {
                        $win.css({left: newLeft + &quot;px&quot;});
                    }
                    if (newTop &gt; 0 &amp;&amp; newTop &lt; clientHeight - 60) {
                        $win.css({top: newTop + &quot;px&quot;});
                    }
                }

                function mouseup() {
                    $document.off('mousemove', mousemove);
                    $document.off('mouseup', mouseup);
                }

                $win.bind('enableDrag', function () {
                    Drag.regist($win, $title);
                });

                $win.bind('disableDrag', function () {
                    Drag.destory($title);
                });
            }
<span id='Drag-method-destory'>            /**
</span>             * 注销,取消拖拽
             */
            , destory: function ($title) {
                $title.css({cursor: 'default'});
                $title.unbind('mousedown');
            }
        }
    })();

})();</pre>
</body>
</html>
